
$(document).ready(function() {

	// CONFIGURATION ----------------------------------------------------------

	// Setting to globally change the speed of the effects
	// Options: 'slow', 'normal', 'fast', or a custom time in milliseconds
	var fxspeed = 'normal';


	// BODY'S TOP PADDING -----------------------------------------------------

	// Adjust the whitespace at the top of the page depending on the height of the viewport.
	// The original top padding is 181px. Each navigation bar is 40px high.
	if ($(window).height() < 800) {
		$('body').css('padding-top', '121px'); // -40px
	}
	if ($(window).height() < 700) {
		$('body').css('padding-top', '81px'); // -80px
	}
	if ($(window).height() < 600) {
		$('body').css('padding-top', '41px'); // -120px
	}


	// NAVIGATION -------------------------------------------------------------

	// Wrap an extra div around the content parts. This makes the slide effects smoother
	// because the new outer div does not contain padding or margin.
	$('div.content').wrap('<div></div>');

	// Hide all the inactive content blocks.
	$('#main > li > h2:not(.active)').siblings().hide();

	// A jQuery object containing the navigation bars
	var $nav = $('#main > li > h2');

	// Here is what happens when the navigation is clicked
	$nav.click(function() {
		// Determine the position (1-5) of the clicked navigation bar,
		// this is needed to calculate the margin to align it next to the title (see below).
		var navcount = $(this)[0].id.replace(/\D+/, '');

		// Highlight or de-highlight the clicked navigation bar by toggling the CSS class “active”
		if ($(this).hasClass('active')) {
			$nav.removeClass('active');
			$('#main').animate({marginTop:0}, fxspeed);
		} else {
			$nav.removeClass('active');
			$(this).addClass('active');
			// Align the active nav next to the title
			$('#main').animate({marginTop:'-' + (navcount - 1) * 40 + 'px'}, fxspeed);
		}

		// Happy sliding!
		$nav.siblings(':visible').slideUp(fxspeed);
		$(this).siblings(':hidden').slideDown(fxspeed);
	});

	// Regular links can also be used to jump to another section (by linking to “#nav1”)
	// This code makes them trigger the navigation bar sliding effects
	$('a[href^=#nav]').click(function() {
		// Clean up the id, we only want the “#xxx” anchor part, and then simulate a navigation bar click
		$('h2' + $(this)[0].href.replace(/^[^#]+/, '')).trigger('click');
	});


	

});